<template>
    <div class="xiaokong2">
        <el-card>
            <template #header>
                楼栋
            </template>
            <el-button v-for="(item,index) in buildList" :key="index" @click="drawTable(index)">{{item.name}}
            </el-button>
        </el-card>
        <el-card>
            <template #header>
                房间
            </template>
            <table id="mytable"></table>
        </el-card>
    </div>
</template>
<script>
import rooms from './rooms'
import $ from 'jquery'
export default {
    data() {
        return {
            container: null,
            buildList: [
                { id: 1, name: '小别墅' },
                { id: 2, name: '中心楼' }
            ]
        }
    },
    mounted() {
        this.container = document.getElementById('mytable')
        this.drawTable(0)
        this.addEvent()
    },
    methods: {
        drawTable(index) {
            const roomsData = rooms[index]
            // 先生成表头
            // 计数：每单元几户 用于合并单元的单元格
            // 有个前提，每个单元的户型都是一样的，即1单元4户，2单元也是4户。
            let unitColspan = 0
            roomsData.data.buildDoor.forEach(item => {
                if (item.unitId === roomsData.data.buildUnit[0].unitId) {
                    unitColspan = unitColspan + 1
                }
            })
            // 表头-单元
            let unitstr = ''
            for (let i = 0; i < roomsData.data.buildUnit.length; i++) {
                unitstr += `<th colspan='${unitColspan}'>${roomsData.data.buildUnit[i].unitName}</th>`
            }
            // 表头-房间号
            let roomstr = ''
            for (let i = 0; i < roomsData.data.buildDoor.length; i++) {
                roomstr += `<th>${roomsData.data.buildDoor[i].doorName}</th>`
            }
            let header = `<tr>
                <th rowspan="2">楼层</th>
                <th>单元</th>
                ${unitstr}
            </tr>
            <tr>
                <th>房号</th>
                ${roomstr}
            </tr>
            `
            let tbodystr = ''
            for (let i = 0; i < roomsData.data.buildFloor.length; i++) {
                tbodystr += `<tr><td colspan="2" class="floor">${roomsData.data.buildFloor[i].floorName}</td>`
                for (let j = 0; j < roomsData.data.buildRoom.length; j++) {
                    if (roomsData.data.buildRoom[j].floorId === roomsData.data.buildFloor[i].floorId) {
                        tbodystr += `<td class="cell">${roomsData.data.buildRoom[j].roomNo}</td>`
                    }
                }
                tbodystr += '</tr>'
            }
            this.container.innerHTML = header + tbodystr
        },
        addEvent(){
            $('table .cell').on('click',function(){
                // eslint-disable-next-line
                $(this).toggleClass('on')
            })
        }
    }
}
</script>
<style lang="scss">
#mytable {
    width: 100%;
    margin: 10px;
    border-collapse: collapse;
    th,
    td {
        height: 20px;
        border: 1px solid #ebeef5;
        padding: 12px;
    }
    td.floor{
        background: #f5f7fa;
    }
    td.on{
        background: #B0C4DE;
    }
    th {
        background: #f5f7fa;
    }
}
</style>